<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>举报虚假房源</title>

    <!--  导航CSS样式导入 -->
    <!-- 导航 -->
    <link rel="stylesheet" th:href="@{/airent/common/css/nav.css}">

    <!-- 正文 -->
    <link rel="stylesheet" th:href="@{/airent/css/report.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/css/fileinput.min.css}" type="text/css" >
    <link rel="stylesheet" th:href="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.css}">

    <!-- 底部 -->
    <link rel="stylesheet" th:href="@{/airent/common/css/footer.css}">
    <link rel="stylesheet" th:href="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/css/bootstrap.min.css}">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script th:src="@{/airent/js/report.js}" type="text/javascript"></script>
    <script th:src="@{/airent/js/vue.js}"></script>

    <style>
        .error{
            color:red;
        }
    </style>

</head>
<body>


<!-- 导航栏 引入topBar -->
<div th:replace="~{head/topBar::topBar}"></div>

<!--  正文  -->
<div class="container" id="myReport">
    <div>
        <h2>举报虚假房源</h2>
        <p>我们承若不会泄露举报人的用户信息<p>
    </div>

    <hr>
    <div class="form-group">
        <label >用户名:</label>
        <input type="text" class="form-control" v-model="userName"  disabled >
    </div>
    <div class="form-group">
        <label >房源:</label>
        <input type="text" class="form-control"  v-model="houseNumber"  disabled>
    </div>
    <div class="form-group">
        <label >举报内容:</label>
        <textarea class="form-control" rows="5" v-model="reportContent" ></textarea>
    </div>
    <div class="form-group">
        <label >上传图片:</label>
        <div class="file-loading">
            <input id="file-5" name="imgs" type="file" multiple>
        </div>
    </div>

    <div class="mt-3">
        <input type="button" id="submit" class="submit btn btn-default btn-lg btn-block" value="提交反馈" @click="addReport()">
        <!--<button id="submit" th:onclick="addReport" class="submit btn btn-default btn-lg btn-block" >提交反馈</button>-->
    </div>
    </form>

</div>

<!-- 引入底部Bar -->
<div th:replace="~{food/bottombar::topBar}"></div>

<script th:src="@{/airent/plugins/jquery/jquery.min.js}"></script>

<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>


<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>

<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/piexif.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/sortable.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/plugins/purify.min.js}"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.bundle.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/fileinput.min.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/LANG.js}"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/js/locales/zh.js}" type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/fas/theme.min.js}" type="text/javascript"></script>
<script th:src="@{/airent/plugins/other/kartik-v-bootstrap-fileinput-ca58fbf/themes/explorer-fas/theme.min.js}" type="text/javascript"></script>
<script th:src="@{/airent/plugins/bootstrap/bootstrap-4.4.1-dist/js/bootstrap.min.js}"></script>
<script th:src="@{/airent/js/jquery.validate.min.js}"></script>
<script th:inline="javascript">
    let vueApp = new Vue({
        el:"#myReport",
        data:{
            userName:[[${session.user.userName}]],
            houseNumber:[[${param.houseNumber}]],
            imgPath:[],
            reportContent:"",
        },
        methods:{
            addReport:function (){
                let imgPath = vueApp.imgPath;
                let url = "/report/addReport";
                let param = "userName=" + vueApp.userName + "&houseNumber=" + vueApp.houseNumber + "&reportContent=" + vueApp.reportContent + "&imgPath[]=" + vueApp.imgPath;
                if (imgPath == null ||imgPath == ''){
                    alert("请先上传图片")
                }else {
                    $.post(url,param,function (result){
                        if (result == "1"){
                            alert("举报成功，请等待审核！");
                            location.href="/cotenancy/showOneHouse/"+vueApp.houseNumber;
                        }else {
                            alert("举报失败!");
                        }
                    },"Json")
                }
            }
        },
    })
</script>
<script>



    $(document).ready(function () {
        $("#file-5").fileinput({
                theme: 'fas',
                language: 'zh',
                uploadUrl: "/houseUser/upload", // 服务器端上传处理程序
                /*minFileCount: 1, //最小上传文件数为1
                maxFileCount: 5, //最大上传文件数为5
                multiple: false, //异步上传*/
                // uploadAsync: false,
                // showUpload : false
                // showUpload: true, //是否显示上传按钮
                // showRemove : true, //显示移除按钮
                // showPreview : true, //是否显示预览
                // showCaption: false,//是否显示标题
                // autoReplace : true,
                minFileCount: 0,
                uploadAsync: true,
                maxFileCount: 5,//最大上传数量
                browseOnZoneClick: true,
                msgFilesTooMany: "选择上传的文件数量 超过允许的最大数值！",
                enctype: 'multipart/form-data',
                // overwriteInitial: false,//不覆盖已上传的图片
                allowedFileExtensions : [ "jpg", "png", "gif" ],
                browseClass : "btn btn-primary", //按钮样式
                previewFileIcon : "<i class='glyphicon glyphicon-king'></i>",
                layoutTemplates :{
                    actionDelete:'', //去除上传预览的缩略图中的删除图标
                    // actionUpload:'',//去除上传预览缩略图中的上传图片；
                    actionZoom:''   //去除上传预览缩略图中的查看详情预览的缩略图标。
                },
            },

        )
    }).on('fileuploaded', function (event, data, previewId, index) {//异步上传成功结果处理
        //图片路径 data.response.success
        // vueApp.imgPath=data.response.success
        addPath(data.response.success)
    }).on('fileerror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    }).on('fileuploaderror', function (event, data, msg) {//异步上传失败结果处理
        alert(data.response.success)
    })


    function addPath(path) {
        let list = vueApp.imgPath
        list.push(path)
        vueApp.imgPath = list
    }
</script>

<script th:inline="javascript">

    $().ready(function(){
        $('#reportForm').validate({
            rules:{
                reportDetail:{
                    required:true,
                    maxlength:200
                }
            },
            messages:{
                reportDetail:{
                    required:'请输入举报内容',
                    maxlength:'不得超过两百字'
                }
            }
        })
    })


    $(function () {
        var result=[[${result}]];
        if(result!=null){
            alert(result);
        }
    })



</script>


</body>
</html>
